@import "../styles/reset.scss";
.z-button {
  @apply inline-block transition-all outline-none bg-blue-600 focus:border-blue-300  px-4 py-2 bg-blue-600	focus:border-blue-300 rounded-lg text-white m-1 duration-500  text-center truncate max-w-xs;
  &:hover,
  &:focus {
    @apply outline-none  ring bg-opacity-70;
  }
  &.round {
    @apply rounded-full;
  }
  &.success {
    @apply bg-green-400;
  }
  &.error {
    @apply bg-red-400;
  }
  &.warning {
    @apply bg-yellow-500;
  }
  &.info {
    @apply bg-gray-400;
  }
  &.text {
    @apply px-2 py-1 ring-0 border-none rounded-none text-blue-500 border-0 bg-transparent;
  }
}
.word-inline {
  word-break: keep-all;
}
.setting-login {
  width: 14px;
}
.height-slider {
  height: calc(100vh - 42px);
}
.dark-pop {
  background-color: #ddd !important;
}
.main-content {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
.rigth-menu {
  position: absolute;
  border: 1px solid #ddd;
  border-radius: 4px;
}
html {
  body {
    &[theme="dark"] {
      .right-border-shadow {
        border: 1px solid #ddd;
        background-color: transparent;
        box-shadow: none;
        // box-shadow: 2px 0px 5px #aaa;
      }
      .el-drawer {
        background-color: $dark-theme-bg;
      }
      .el-submenu {
        &.is-opened {
          outline: 0 !important;
          @apply bg-blue-100;
        }
        .el-submenu__title:focus,
        .el-submenu__title:hover {
          outline: 0 !important;
          @apply bg-blue-300;
        }
      }
    }
    .el-drawer {
      background-color: #fff;
    }
  }
  .flash-btn {
    position: relative;
    /* margin: 50px; */
    width: 120px;
    height: 40px;
    text-align: center;
    /* padding: 10px; */
    line-height: 40px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: 5px;
    color: aqua;
    overflow: hidden;
    -webkit-box-reflect: below 1px
      linear-gradient(transparent, rgba(6, 133, 133, 0.3));
    &:hover {
      background-color: aqua;
      box-shadow: 0 0 5px aqua, 0 0 75px aqua, 0 0 155px aqua;
      color: black;
    }
    span {
      &:nth-of-type(1) {
        position: absolute;
        left: -100%;
        width: 100%;
        height: 3px;
        background-image: linear-gradient(to left, aqua, transparent);
        animation: shang 1s linear infinite;
      }
      &:nth-of-type(2) {
        position: absolute;
        top: -100%;
        right: 0;
        width: 3px;
        height: 100%;
        background-image: linear-gradient(to top, aqua, transparent);
        animation: you 1s linear infinite;
        animation-delay: 0.25s;
      }
      &:nth-of-type(3) {
        position: absolute;
        right: -100%;
        bottom: 0;
        width: 100%;
        height: 3px;
        background-image: linear-gradient(to right, aqua, transparent);
        animation: xia 1s linear infinite;
        animation-delay: 0.5s;
      }
      &:nth-of-type(4) {
        position: absolute;
        bottom: -100%;
        left: 0;
        width: 3px;
        height: 100%;
        background-image: linear-gradient(to bottom, aqua, transparent);
        animation: zuo 1s linear infinite;
        animation-delay: 0.75s;
      }
    }
  }
  .cyberpunk {
    width: 120px;
    height: 40px;
    text-align: center;
    font-family: "De Jyeon", sans-serif;
    line-height: 40px;
    color: rgb(255, 251, 251);
    background: linear-gradient(
      30deg,
      transparent 10%,
      rgb(255, 136, 0) 10% 95%,
      rgb(0, 255, 149) 95%
    );
    box-shadow: 5px 0 0 rgb(0, 204, 255);
    cursor: pointer;
    position: relative;
    &::after {
      content: "Aurora Borealis night";
      position: absolute;
      top: 0;
      left: 0;
      text-shadow: -5px -2px 0 rgb(0, 183, 255), 5px 2px 0 rgb(0, 255, 115);
      visibility: hidden;
    }
    &:hover::after {
      animation: san 1s;
      animation-timing-function: steps(1, end);
    }
  }
  .not-found-content {
    color: #fff;
    font-size: 18px;
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px aqua,
      0 0 82px aqua, 0 0 92px aqua, 0 0 102px aqua, 0 0 151px aqua;
    animation: flicker 3.5s infinite alternate;
    cursor: default;
    user-select: none;
    .not-found-title {
      font-size: 4.35rem;
      line-height: 8.5rem;
      font-style: italic;
    }
    .not-found-tip {
      font-size: 1.55rem;
      text-decoration: line-through;
    }
  }
  .right-border-shadow {
    border-right: 1px solid #ddd;
    box-shadow: 2px 0px 10px #ddd;
  }
  .slider-bar {
    &.el-menu {
      border-right: 0 !important;
    }
    .el-submenu {
      &.is-opened {
        outline: 0 !important;
        @apply bg-blue-100;
      }
      .el-submenu__title:focus,
      .el-submenu__title:hover {
        outline: 0 !important;
        @apply bg-blue-100;
      }
    }
  }
}
@keyframes shang {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
@keyframes xia {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}
@keyframes you {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}
@keyframes zuo {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
@keyframes san {
  0% {
    clip-path: inset(20% -5px 60% 0);
    transform: translate(-6px, 5px);
    visibility: visible;
  }
  10% {
    clip-path: inset(50% -5px 30% 0);
    transform: translate(6px, -5px);
  }
  20% {
    clip-path: inset(20% -5px 60% 0);
    transform: translate(5px, 0px);
  }
  30% {
    clip-path: inset(80% -5px 5% 0);
    transform: translate(-8px, 5px);
  }
  40% {
    clip-path: inset(0 -5px 80% 0);
    transform: translate(-4px, -3px);
  }
  50% {
    clip-path: inset(50% -5px 30% 0);
    transform: translate(-6px, -5px);
  }
  60% {
    clip-path: inset(80% -5px 5% 0);
    transform: translate(-7px, 5px);
  }
  70% {
    clip-path: inset(0 -5px 80% 0);
    transform: translate(3px, 6px);
  }
  80% {
    clip-path: inset(50% -5px 30% 0);
    transform: translate(5px, 5px);
  }
  90% {
    clip-path: inset(20% -5px 60% 0);
    transform: translate(6px, -5px);
  }
  100% {
    clip-path: inset(0 -5px 80% 0);
    transform: translate(1px, 5px);
  }
}
/*v-enter 是进入之前，元素的起始状态*/
/*v-leave-to 离开之后动画的终止状态*/
.v-enter,
.v-leave-to {
  opacity: 0; /*透明度*/
  transform: scale3d(-45edge);
}
/*入场(离场)动画的时间段   */
.v-enter-active,
.v-leave-active {
  transition: all 0.8s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.4s;
}
.scale-enter,
.scale-leave-to {
  transform: scale(0);
}
.scale-enter-active,
.scale-leave-active {
  transition: all 0.4s;
}
.left-enter,
.left-leave-to {
  transform: translate3d(-100%, 0, 0);
}
.left-leave,
.left-enter-to {
  transform: translate3d(0, 0, 0);
}
.left-enter-active,
.left-leave-active {
  transition: all 0.4s;
}
.right-enter,
.right-leave-to {
  transform: translate3d(100%, 0, 0);
}
/* .right-leave,
.right-enter-to {
  transform: translate3d(0, 0, 0);
} */
.right-enter-active,
.right-leave-active {
  transition: all 0.4s;
}
/* .top-enter,
.top-leave-to {
  transform: translate3d(0, -100%, 0);
} */
.top-leave,
.top-enter-to {
  transform: translate3d(0, 0, 0);
}
/* .top-enter-active,
.top-leave-active {
  transition: all 0.4s;
} */
